<template>
  <a-drawer
    v-model:open="open"
    class="custom-class"
    root-class-name="root-class-name"
    style="color: red; width: 800px;"
    size="large"
    title="评论列表"
    placement="right"
    @expand="expand"
    @after-open-change="afterOpenChange"
  >
    <a-table row-key="id" :columns="columns" :pagination="pagination" :loading="loading" :data-source="items" @change="tableChange">
      <template #title>
        <div class="flex justify-between">
          <div class="flex">
          </div>
          <a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
            <a-form-item>
              <a-input v-model:value="searchData.title" placeholder="评论名称">
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">
                搜索
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </template>
      <template #bodyCell="{ text, record, column }">
        <a-space wrap v-if="column.dataIndex === 'operation'">
          <a-button type="primary" size="small" @click="$refs.form.edit(record)" v-access="['Topic:update']">编辑</a-button>
          <a-popconfirm title="确认删除？" @confirm="del(record.id)">
            <a-button danger size="small" v-access="['Topic:del']">删除</a-button>
          </a-popconfirm>
        </a-space>
        <div class="editable-cell" v-if="column.dataIndex === 'serial'">
          <a-input compact v-if="editData.serial > 0" :maxlength="2" v-model:value="record.serial" @pressEnter="editCell({id: record.id, serial: record.serial})">
            <template #addonAfter><check-outlined @click="editCell({id: record.id, serial: record.serial})" /></template>
          </a-input>
          <div v-else @click="editData.serial=record.id">
            {{ text }}
            <edit-outlined />
          </div>
        </div>
        <a-avatar v-else-if="column.dataIndex === 'logo'" shape="square" :size="32" :src="text">
          <template #icon><FileImageOutlined /></template>
        </a-avatar>
        <a-switch v-else-if="column.dataIndex === 'status'" :checked="text" checked-children="开启" :checked-value="2" un-checked-children="关闭" :un-checked-value="1" @change="(e: number)=>put({id: record.id, status: e})" />
        <a-switch v-else-if="column.dataIndex === 'is_try'" :checked="text" checked-children="是" :checked-value="2" un-checked-children="否" :un-checked-value="1" @change="(e: number)=>put({id: record.id, is_try: e})" />
      </template>
    </a-table>
  </a-drawer>
 </template>
<script lang="ts">
import {page, list} from "@/mixins"

export default {
	mixins: [page, list],
	data() {
		return {
			title: '新增评论',
			loadPath: 'dynamic-comment',
			open: false,
			columns: [
				{
					title: 'ID',
					dataIndex: 'id'
				},
				{
					title: '用户',
					dataIndex: 'nickname',
				},
				{
					title: '内容',
					dataIndex: 'content',
				},
				{
					title: '状态',
					dataIndex: 'status',
					customRender: ({text}) => ['---','关闭','开启'][text] ?? '---'
				},
				{
					title: '评论于',
					dataIndex: 'create_at',
				},
				{
					width: 200,
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			searchData: {
				title: '',
				activity_id: 0
			}
		}
	},
	methods: {
		add(){
			this.$refs.form.formData.activity_id = this.searchData.activity_id
			this.$refs.form.add()
		},
		afterOpenChange(e: boolean){
			if(e && this.searchData.activity_id > 0){
				this.items = []
				this.fetch({...this.searchData, page: this.pagination.current})		
			}
		},
		expand(a, b){
			console.log(a, b)
		}
	}
}
</script>